.button {
  padding: 8px 15px;
  font-size: 14px;
  color: #fff;
  background: rgb(6, 99, 59);
  // border: solid 2px #74aa8c;
  position: relative;
  cursor: pointer;

  .bord {
    &:before,
    &:after {
      content: '';
      display: block;
      position: absolute;
      width: 0;
      height: 2px;
      background: #94c2b0;
      transition: width 0.3s;
    }
    &:before {
      top: 0;
      left: 0;
    }
    &:after {
      bottom: 0;
      right: 0;
    }
  }
  .bord1 {
    &:before,
    &:after {
      content: '';
      display: block;
      position: absolute;
      width: 2px;
      height: 0;
      background: #94c2b0;
      transition: height 0.3s;
    }
    &:before {
      bottom: 0;
      left: 0;
    }
    &:after {
      top: 0;
      right: 0;
    }
  }
}

.button {
  &:hover {
    .bord {
      &:before,
      &:after {
        width: 100%;
      }
    }
    .bord1 {
      &:before,
      &:after {
        height: 100%;
      }
    }
  }
}
